<template>
  <div>
    <el-drawer :size="width" :visible.sync="modelValue" :wrapperClosable="wrapperClosable" :withHeader="withHeader"
      :title="title" :close-on-click-modal="false" :show-close="showClose" :destroy-on-close="true" :modal="modal"
      class="custom-drawer" :modal-class="modalClass">
      <div class="drawer-box" v-if="modelValue">
        <div class="el-drawer-header" v-if="slotHeader">
          <slot name="header"></slot>
        </div>
        <div class="el-drawer-body">
          <slot></slot>
        </div>
        <div class="el-drawer-footer" v-if="slotFooter">
          <slot name="footer"></slot>
        </div>
      </div>

      <div class="drawer-close flex_center" @click="handleClose">
        <i class="el-icon-close"></i>
      </div>
    </el-drawer>
    <!-- 遮罩层关闭按钮 -->
    <!-- <div class="drawer-mask-close" :style="{ right: `calc(${width})` }" :class="{ show: modelValue }" @click="handleClose">
    <i class="el-icon-close"></i>
  </div> -->
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose, watch, defineEmits } from '@vue/composition-api'

const props = defineProps({
  // 抽屉大小
  width: {
    type: String,
    default: '50%'
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true
  },
  // 标题
  title: {
    type: String,
    default: '标题'
  },
  // 点击遮罩层是否可以关闭 Drawer
  wrapperClosable: {
    type: Boolean,
    default: false
  },
  // 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效
  withHeader: {
    type: Boolean,
    default: true
  },
  // 是否显示自定义标题
  slotHeader: {
    type: Boolean,
    default: false
  },
  // 是否显示自定义底部
  slotFooter: {
    type: Boolean,
    default: false
  },
  // 是否出现遮罩层
  modal: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['closeFun'])

const modelValue = ref(false)
const modalClass = ref('')

const open = () => {
  modelValue.value = true
  // 设置遮罩层z-index
  setTimeout(() => {
    const modal = document.querySelector('.v-modal')
    if (modal) {
      modal.style.zIndex = '2000'
    }
  }, 0)
}

const handleClose = () => {
  modelValue.value = false
  emit('closeFun')
  // 重置遮罩层z-index
  setTimeout(() => {
    const modal = document.querySelector('.v-modal')
    if (modal) {
      modal.style.zIndex = '2000'
    }
  }, 0)
}

// 监听抽屉状态变化
watch(() => modelValue.value, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      const modal = document.querySelector('.v-modal')
      if (modal) {
        modal.style.zIndex = '2000'
      }
    }, 0)
  }
})

const close = () => {
  modelValue.value = false
}

defineExpose({
  open,
  close,
  handleClose
})
</script>

<style lang="scss" scoped>
.custom-drawer {
  .drawer-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fff;
  }

  ::v-deep .el-drawer__header {
    margin-bottom: 0px !important;
    padding: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    border-bottom: 1px solid #e5e5e5 !important;
  }

  .el-drawer-body {
    flex: 1;
    overflow: auto;
    padding: 10px;
  }

  .el-drawer-header {
    flex-shrink: 0;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
  }

  .el-drawer-footer {
    flex-shrink: 0;
    padding: 10px;
    border-top: 1px solid #e5e5e5;
  }

  .drawer-close {
    position: fixed;
    right: 20px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color: #fff;

    .el-icon-close {
      font-size: 18px;
    }
  }
}

.drawer-mask-close {
  position: fixed;
  right: calc(50%);
  top: 20%;
  transform: translateY(-20%);
  width: 40px;
  height: 34px;
  background-color: rgba(51, 136, 255, 1);
  border-radius: 6px 0 0 6px;
  color: #fff;
  text-align: center;
  line-height: 34px;
  font-size: 14px;
  cursor: pointer;
  z-index: 3000;
  transition: all 0.01s ease-in-out;
  opacity: 0;
  visibility: hidden;

  &.show {
    opacity: 1;
    visibility: visible;
  }

  .el-icon-close {
    font-size: 18px;
    color: #fff;
  }
}

:deep(.v-modal) {
  z-index: 2000 !important;
}
</style>
